<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <style>
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      main {
        width: 400px;
        /* height: 200px; */
        /* border: 1px solid; */
        margin: 0 auto;
      }
      .header {
        display: flex;
        width: 400px;
        background-color: #000;
        color: #fff;
        line-height: 30px;
        text-align: center;
      }
      block{
        cursor: pointer;
        flex-grow: 1;
      }
  
      .active {
        background-color: gainsboro;
      }
      .content{
        display: none;
      }
      .block-box{
          display: none;
          line-height: 30px;
      }
    </style>
</head>
<body>
    <main>
        <div class="header">
          <div class="block">第一节</div>
          <div class="block">第二节</div>
          <div class="block">第三节</div>
          <div class="block">第四节</div>
        </div>
        <div class="content">
          <ul class="block-box ">
            <li>这是第一节1</li>
            <li>这是第一节2</li>
            <li>这是第一节3</li>
            <li>这是第一节4</li>
          </ul>
          <ul class="block-box">
            <li>这是第二节1</li>
            <li>这是第二节2</li>
          </ul>
          <ul class="block-box">
            <li>这是第三节1</li>
            <li>这是第三节2</li>
            <li>这是第三节3</li>
          </ul>
         
        </div>
      </main>
      <script src="jQuery.js"></script>
<script>

$('.block').hover(function(){
        $(this).addClass('active');
        var index = $(this).index();
        if (index < 3) {
            $('.content').height($('.block-box').eq(index).find('li').length*30);
            $('.content').stop().slideDown(200);
            $('.block-box').eq(index).show().siblings().hide();
        } else {
            $('.content').stop().slideUp(200);
        }
    }, function(){
        $(this).removeClass('active')
    });

    $('main').mouseleave(function(){
        $('.content').stop().slideUp(200);
    });
    $('.content').mouseenter(function(){
        $(this).stop().slideDown(200);
    });

    

</script>
</body>
</html>